<template>
  <div>
    <el-card>
      <el-form>
        <el-form-item label="网站地址：">
          <el-input placeholder="请输入网址" v-model="http">
            <template slot="prepend">http://</template>
          </el-input>
        </el-form-item>
        <el-form-item label="网站名称：">
          <el-input placeholder="请输入名称" v-model="name"></el-input>
        </el-form-item>
        <el-form-item label="网站介绍：">
          <el-input
            type="textarea"
            v-model="intro"
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>

        <!-- 轮播图片上传 -->
        <el-form-item label="轮播图上传:">
          <upload-picture
            @fileNameEvn="getFileName"
            @removeFileEvn="removeFile"
            :files="files"
            :limit="limit"
          ></upload-picture>
        </el-form-item>

        <el-form-item style="margin: 15px 0" label="ICP备案号：">
          <el-input v-model="ICP" placeholder="ICP"></el-input>
        </el-form-item>
        <el-form-item label="公安备案号：">
          <el-input v-model="PublicICP"></el-input>
        </el-form-item>
        <el-form-item label="站点版权">
          <el-input placeholder="请输入版权信息" v-model="Copy"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input
            placeholder="请输入正确的11位电话号码"
            v-model="Phone"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="email" placeholder="E-mail"></el-input>
        </el-form-item>

        <el-form-item label="关注我们（qq二维码）上传:">
          <upload-picture
            @fileNameEvn="getQQFileName"
            @removeFileEvn="qqFile = ''"
            :files="qqFile"
            :limit="1"
          ></upload-picture>
        </el-form-item>
        <el-form-item label="关注我们（微信二维码）上传:">
          <upload-picture
            @fileNameEvn="getWxFileName"
            @removeFileEvn="wxFile = ''"
            :files="wxFile"
            :limit="1"
          ></upload-picture>
        </el-form-item>
      </el-form>
      <div style="">
        <el-button type="primary" plain @click="websetInfo">提交</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { putWebset, getWebset } from '../../api/webset'
import uploadPicture from '../../components/UploadPicture'

export default {
  components: {
    uploadPicture
  },
  data () {
    return {
      http: '',
      name: '',
      intro: '',
      ICP: '',
      PublicICP: '',
      Copy: '',
      Phone: '',
      email: '',
      submit: '',
      dialogImageUrl: [],
      dialogVisible: false,
      disabled: false,
      limit: 5,
      files: [],
      qqFile: '',
      wxFile: ''
    }
  },
  mounted () {
    this.getWeb()
  },
  computed: {
    getInfoContent () {
      return this.files.join(' ')
    }
  },
  methods: {
    // 获取已经上传成功的图片name
    getFileName (filename) {
      this.files.push(filename)
    },
    // 删除轮播图片
    removeFile (filename) {
      this.files = this.files.filter((item) => item !== filename)
    },
    // 获取qq二维码图片
    getQQFileName (filename) {
      this.qqFile = filename
    },
    // 获取微信二维码图片
    getWxFileName (filename) {
      this.wxFile = filename
    },

    websetInfo () {
      putWebset(1, {
        url: this.http,
        owner: this.name,
        introduce: this.intro,
        websiteICP: this.ICP,
        putOnRecords: this.PublicICP,
        remarks: this.Copy,
        phone: this.Phone,
        mailbox: this.email,
        carouselsPicture: this.getInfoContent,
        qqCodePicture: this.qqFile,
        wxCodePicture: this.wxFile
      }).then(({ data }) => {
        console.log(data)
        this.$message({
          showClose: true,
          message: '修改成功',
          type: 'success'
        })
      })
    },
    getWeb () {
      getWebset(1).then(({ data }) => {
        console.log(data)
        this.http = data.data.url
        this.name = data.data.owner
        this.intro = data.data.introduce
        this.ICP = data.data.websiteICP
        this.PublicICP = data.data.putOnRecords
        this.Copy = data.data.remarks
        this.Phone = data.data.phone
        this.email = data.data.mailbox
        this.files = data.data.carouselsPicture
          ? data.data.carouselsPicture.split(' ')
          : []
        this.qqFile = data.data.qqCodePicture
        this.wxFile = data.data.wxCodePicture
      })
    }
  }
}
</script>

<style scoped>
.el-button {
  font-size: 15px;
  text-align: center;
  margin-left: 35rem;
  min-width: 100px;
  min-height: 30px;
}
</style>
